<template>
    <view class="page">
        <u-swiper :list="banner" @change="changePage" :autoplay="true" height="360rpx" imgMode="aspectFill" showTitle
            keyName="image" :circular="true" indicatorStyle="right: 20px">
        </u-swiper>
        <view class="title">{{ obj.title }}</view>
        <view class="flex">
            <view class="item">
                <image src="https://www.atuanjian.com/appletStatic/static/images/facilities/area.svg" mode="scaleToFill" />
                {{ obj.place_serve_type_list_item[6].area || '0' }}
            </view>
            <view class="item">
                <image src="https://www.atuanjian.com/appletStatic/static/images/facilities/float.svg" mode="scaleToFill" />
                {{ obj.place_serve_type_list_item[6].count || '0' }}
            </view>
            <view class="item">
                <image src="https://www.atuanjian.com/appletStatic/static/images/facilities/WIFI.svg" mode="scaleToFill" />
                WI-FI 免费
            </view>
            <view class="item">
                <image src="https://www.atuanjian.com/appletStatic/static/images/facilities/chuanghu.svg" mode="scaleToFill" />
                {{ obj.place_serve_type_list_item[6].window || '无' }}
            </view>
            <view class="item">
                <image src="https://www.atuanjian.com/appletStatic/static/images/facilities/chuanghu.svg" mode="scaleToFill" />
                禁烟
            </view>
        </view>
        <block v-if="title === '住宿'">
            <view class="flex">
                <view class="flex-item">
                    <image src="https://www.atuanjian.com/appletStatic/static/images/facilities/chuang.svg" mode="scaleToFill" />
                </view>
                <view class="flex-con">{{ obj.place_serve_type_list_item[6].bed_type || '' }}</view>
            </view>
            <view class="flex">
                <view class="flex-item">
                    <image src="https://www.atuanjian.com/appletStatic/static/images/facilities/dao.svg" mode="scaleToFill" />
                </view>
                <view class="flex-con">{{ obj.place_serve_type_list_item[6][1].hanshuangzao || '' }}</view>
            </view>
            <view class="flex">
                <view class="flex-item">
                    <image src="https://www.atuanjian.com/appletStatic/static/images/facilities/internet.svg" mode="scaleToFill" />
                </view>
                <view class="flex-con">{{ obj.place_serve_type_list_item[6][1].wifi || '' }}</view>
                <view class="flex-con">{{ obj.place_serve_type_list_item[6][1].kongtiao || '' }}</view>
            </view>
            <view class="flex">
                <view class="flex-item">
                    <image src="https://www.atuanjian.com/appletStatic/static/images/facilities/weiyu.svg" mode="scaleToFill" />
                </view>
                <view class="flex-con">{{ obj.place_serve_type_list_item[6][2].dianchuifeng || '' }}</view>
                <view class="flex-con">{{ obj.place_serve_type_list_item[6][2].reshuilinyu || '' }}</view>
                <view class="flex-con">{{ obj.place_serve_type_list_item[6][2].xishuyongpin || '' }}</view>
                <view class="flex-con">{{ obj.place_serve_type_list_item[6][2].yicixingtuoxie || '' }}</view>
            </view>
            <view class="flex">
                <view class="flex-item">
                    <image src="https://www.atuanjian.com/appletStatic/static/images/facilities/bianli.svg" mode="scaleToFill" />
                </view>
                <view class="flex-con">{{ obj.place_serve_type_list_item[6][3].bianlidian || '' }}</view>
                <view class="flex-con">{{ obj.place_serve_type_list_item[6][3].mianfeitingche || '' }}</view>
            </view>
        </block>
    </view>
</template>
<script>
export default {
    data() {
        return {
            obj: {},
            showImg: '',
            banner: [],
            title: ''
        }
    },
    onLoad(options) {
        console.log(options)
        this.obj = JSON.parse(decodeURIComponent(options.date));
        this.title = options.title
        this.showImg = this.$config.showImgApi;
        uni.setNavigationBarTitle({
            title: this.obj.title
        });
        this.banner = []
        this.obj.img_arr.forEach(val => {
            this.banner.push({
                image: this.showImg + val
            })
        })
    },
    methods: {
        changePage(e) {
        },
    },
}
</script>
<style lang="scss" scoped>
.page {
    background-color: #ffffff;

    .title {
        width: 92%;
        margin: 26rpx auto 0;
        font-size: 40rpx;
    }

    .flex {
        width: 92%;
        margin: 0 auto;
        display: flex;
        padding: 20rpx 0;
        border-bottom: 1rpx solid#D7D7D7;

        .flex-item {
            image {
                width: 34rpx;
                height: 34rpx;
            }
        }

        .flex-con {
            font-size: 20rpx;
            margin-left: 30rpx;
        }

        .item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 20rpx;
            align-items: center;

            image {
                width: 42rpx;
                height: 42rpx;
            }
        }
    }
}
</style>